import React from 'react';
import {List,InputItem,Button, Toast,NavBar,Icon, WingBlank, WhiteSpace} from 'antd-mobile'
import {createForm} from 'rc-form'
import axios from '../../axios/index'
import './index.less'
const Item = List.Item;
 class CommonPage extends React.Component{
   
      onSubmit = () => {
        this.props.form.validateFields({ force: true }, (error) => {
          if (!error) {
            console.log(this.props.form.getFieldsValue());
            let formData=this.props.form.getFieldsValue();
            axios.ajax({
              url:'/api/v1/vas/user/bind',
              method:'post',
              data:{
                id_number:formData.IDNum,
                plate_number:formData.carNum
              }
            }).then((res)=>{
                if(res.code===0){
                    Toast.info('绑定成功');
                    this.props.history.push('/equity');
                }else if(res.code===15400){
                  Toast.info(res.message);
                }else{
                  Toast.info(res.message);
                }
            }).catch((res)=>{
              Toast.info(res.message);
            });
          } else {
            Toast.info('请确认信息已正确输入');
          }
        });
      }
      validateAccount = (rule, value, callback) => {
        if (value && value.length > 4) {
          callback();
        } else {
          callback(new Error('用户名至少四位字符'));
        }
      }
    render(){
        let errors;
        const { getFieldProps, getFieldError } = this.props.form;
        return(
        <div>
          <NavBar
              mode="light"
              leftContent="返回"
              icon={<Icon type="left" />}
              onLeftClick={() => {
                  const {history}=this.props;
                  history.push({pathname:'/mine'})
              }}
              rightContent={[
                  <Icon key="1" type="ellipsis" />,
              ]}
          >绑定增值服务</NavBar>
          <div className='form_style'>
          <WingBlank style={{paddingTop:'35%'}}>
          <form>
          <List renderHeader={() => {}}>
         
          <InputItem
            {...getFieldProps('IDNum', {
              initialValue: '',
              rules: [
                { 
                  required: true, 
                  message: '身份证号不能为空' },
                // { validator: this.validateAccount },
                {
                  pattern:new RegExp(/(^\d{18}$)|(^\d{17}(\d|X|x)$)/),
                  message:'请输入合法的身份证号'
                }
              ],
            })}
            clear
            error={!!getFieldError('IDNum')}
            onErrorClick={() => {
              Toast.info(getFieldError('IDNum').join(','));
            }}
            placeholder="请输入身份证号"
          ></InputItem>  
          </List>
          <List renderHeader={() => {}}>
          <InputItem
            {...getFieldProps('carNum', {
              initialValue: '',
              rules: [
                { 
                  required: true, 
                  message: '车牌号不能为空' },
                // { validator: this.validateAccount },
                {
                  min:7,max:8,
                  message:'长度不在范围内'
                },
                // {
                //   pattern:new RegExp('^\\w+$','g'),
                //   message:'车牌号必须为字母或者数字'
                // }
              ],
            })}
            error={!!getFieldError('carNum')}
            onErrorClick={() => {
              Toast.info(getFieldError('carNum').join(','));
            }}
            placeholder="请输入车牌号"
          ></InputItem>    
            </List>
          
          <WhiteSpace size='lg'/>
          <WhiteSpace size='lg'/>
          <Button className='btn_bind' type="primary" onClick={this.onSubmit}>绑定</Button>              
        </form>
        </WingBlank>
        </div>
      </div>
      );
    }
}
export default createForm()(CommonPage);